<template>
  <div class="profile-container">
    <el-card class="profile-card" shadow="hover">
      <el-descriptions title="个人信息" :column="1" border>
        <el-descriptions-item label="头像">
          <img :src="avatarUrl" alt="头像" class="avatar" />
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ userName }}
        </el-descriptions-item>
        <!-- 你可以在这里添加更多的描述项 -->
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// 示例数据
const avatarUrl = computed(() => {
  return "@/assets/images/login-bg.png";
}); // 替换为实际的头像路径
const userName = ref("张三"); // 替换为实际的用户名
</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* 全屏高度 */
  background-color: #f5f5f5; /* 可选：背景色 */
  margin: 0;
}

.profile-card {
  width: 100%;
  max-width: 600px; /* 可选：限制最大宽度 */
  padding: 20px;
  box-sizing: border-box; /* 确保 padding 不影响宽度 */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover; /* 确保图片按比例填充 */
}
</style>
